<template>
	<div>
		<n-card :bordered="false" title="上传图片"> 上传图片，用于向用户收集图片信息 </n-card>
		<n-card :bordered="false" class="mt-3">
			<n-form ref="formRef" :label-width="80" :model="formValue" :rules="rules" label-placement="left">
				<n-form-item label="预约姓名" path="name">
					<n-input v-model:value="formValue.name" placeholder="输入姓名" />
				</n-form-item>
				<n-form-item label="预约号码" path="mobile">
					<n-input v-model:value="formValue.mobile" placeholder="电话号码" />
				</n-form-item>
				<n-form-item label="病例图片" path="images">
					<!-- <BasicUpload
								:action="`${uploadUrl}/v1.0/files`"
								:headers="uploadHeaders"
								:data="{ type: 0 }"
								name="files"
								:width="100"
								:height="100"
								@uploadChange="uploadChange"
								v-model:value="formValue.images"
								helpText="单个文件不超过2MB，最多只能上传10个文件"
							/> -->
				</n-form-item>
				<n-form-item label=" ">
					<n-space>
						<n-button type="primary" @click="handelSubmit">提交预约</n-button>
						<n-button @click="handelResetForm">重置</n-button>
					</n-space>
				</n-form-item>
			</n-form>
		</n-card>
	</div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { useMessage } from 'naive-ui';
// import { BasicUpload } from "@/components/Upload";
// import { useGlobSetting } from "@/hooks/setting";

// const globSetting = useGlobSetting();
const message = useMessage();
// const { uploadUrl } = globSetting;

const rules = {
	name: { required: true, message: '请输入预约姓名', trigger: 'blur' },
	remark: { required: true, message: '请输入预约备注', trigger: 'blur' },
	images: { required: true, type: 'array', message: '请上传病例图片', trigger: 'change' },
};

const formRef: any = ref(null);

const formValue = reactive({
	name: '',
	mobile: '',
	//图片列表 通常查看和编辑使用 绝对路径 | 相对路径都可以
	images: ['https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'],
});

// const uploadHeaders = reactive({
// 	platform: 'miniPrograms',
// 	timestamp: new Date().getTime(),
// 	token: 'Q6fFCuhc1vkKn5JNFWaCLf6gRAc5n0LQHd08dSnG4qo=',
// });

function handelSubmit() {
	formRef.value.validate((errors: any) => {
		if (!errors) {
			message.success('验证成功');
		} else {
			message.error('验证失败，请填写完整信息');
		}
	});
}

function handelResetForm() {
	formRef.value.restoreValidation();
}

// function uploadChange(list: string[]) {
// 	formValue.images = unref(list);
// }
</script>
